<template>
  <div class="imgalone-edit">
    <h1 style="margin-bottom:15px">单列图片</h1>
    <el-form
      ref="form"
      :model="content"
      label-width="100px"
      :rules="rules"
      hide-required-asterisk
      validate-on-rule-change
    >
      <el-form-item label="图片高度" prop="height">
        <el-input v-model="content.height"></el-input>
      </el-form-item>
      <div style="text-align: right">
        <el-button type="primary" @click="handleClick">保存</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rules: {
        height: [{ required: true, message: "图片高度不能为空" }],
      },
    };
  },
  props: {
    listIndex: Number,
    content: Object,
  },
  // 监听表单属性改变时，校验一次
  watch: {
    content: {
      handler(newval) {
        this.formValidate();
      },
      deep: true,
    },
  },
  methods: {
    // 表单校验方法
    formValidate() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.content.validate = true;
        } else {
          this.content.validate = false;
        }
      });
    },
    handleClick() {
      if (this.content.validate) {
        this.$message.success("保存成功");
      } else {
        this.$message.warning("请完成每一项的填写");
      }
    },
  },
};
</script>

<style lang="less" scoped>
</style>